<template>
	<view style="position: relative;">

		<view class="card" style="border-radius: 0 0 20rpx 20rpx;" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="top">
				<view class="left">
					<image :src="icon" class="logo" mode="widthFix"></image>
					<text class="logo-text">{{title}}</text>
				</view>

				<!-- 打开列表 -->
				<image v-if="type==1" class="right" :src="!listShow?listIcon:closeIcon" @click="showList()"
					mode="widthFix">
				</image>

				<!-- 上架市场 -->
				<view v-if="type==2" class="shop-right">
					<view style="line-height: 1;" @click="putProduct">
						+ 上架道具
					</view>
				</view>

				<!-- 返回 -->
				<view class="back-box" @click="goBack()" v-if="type==3">
					<image class="back-icon" src="/static/public-images/back.png" mode="widthFix"></image>
					<view class="back-text">返回</view>
				</view>


				<view style="display: flex;align-items: center;gap: 15rpx;" v-if="type==4">
					<view class="back-box" @click="$jump('/pages/airport/fit')">
						<view class="back-text" style="margin-left: 0;">合成</view>
					</view>
					<view class="back-box" @click="$jump('/pages/market/rules?type=1')">
						<view class="back-text" style="margin-left: 0;">规则</view>
					</view>
				</view>




			</view>
		</view>

		<star-news></star-news>


		<!-- 上架弹窗 -->
		<putPopup ref="putRef"></putPopup>

		<!-- 弹窗列表 -->
		<!-- type=1首页 type=2机场 type=3市场 type=4游戏 type=5我的-->
		<star-list :show.sync="listShow" :type="listType" ref="listRef"></star-list>

		<!-- 弹窗遮罩层 -->
		<u-overlay :show="listShow" @click="showList()" :z-index="99999" :opacity="0"></u-overlay>

	</view>
</template>

<script>
	import putPopup from '@/pages/market/components/putPopup/index.vue'
	export default {
		components: {
			putPopup
		},
		props: {
			icon: {
				type: String,
				default: '/static/icon-images/rocket.png'
			},
			title: {
				type: String,
				default: '暂无标题'
			},
			// type=1 打开列表 type=2 上架市场 type=3 返回
			type: {
				type: Number,
				default: 0
			},
			// type=1 首页 type=2 机场
			listType: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight,
				// 列表展示 false=list true=close
				listShow: false,
				listIcon: '/static/icon-images/bars.png',
				closeIcon: '/static/icon-images/close-grey.png',
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			putProduct() {
				this.$refs.putRef.open()
			},
			showList() {
				if (!this.listShow) {
					this.listShow = true
				} else if (this.listShow) {
					this.listShow = false
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.top {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 130rpx;
	}

	.logo {
		width: 50rpx;
		height: 50rpx;
		display: block;
	}

	.left {
		display: flex;
		align-items: center;
	}

	.right {
		width: 50rpx;
		height: 40rpx;
		display: block;
	}

	.logo-text {
		margin-left: 10rpx;
		font-size: 38rpx;
		font-weight: 800;
		background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
		-webkit-background-clip: text;
		color: transparent;
	}

	.shop-right {
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		background-color: #9a4dff;
		box-shadow: 0 4px 20px rgba(122, 58, 255, 0.6);
	}

	.back-box {
		border-radius: 20rpx;
		background-color: #9a4dff;
		box-shadow: 0 4px 20px rgba(122, 58, 255, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 30rpx;

		.back-icon {
			width: 38rpx;
			height: 30rpx;
			display: block;
		}

		.back-text {
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
			line-height: 1;
			margin-left: 8rpx;
		}
	}
</style>